<template>
  <!--面包屑导航-->
    <el-row style="margin: 5px 5px;">
        <el-col :span="24">
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>设备管理</el-breadcrumb-item>
                <el-breadcrumb-item>设备台账</el-breadcrumb-item>
            </el-breadcrumb>
        </el-col>
    </el-row>
  <!--主体分割-->
    <el-row style="margin: 10px 5px;">
        <!--类别列表-->
        <el-col :span="4">
            <template v-for="deviceType in deviceTypeList">
                <el-link type="info" @click="changeType(deviceType.deviceTypeId)">
                    {{ deviceType.deviceTypeName }}
                </el-link>
                <br>
            </template>
        </el-col>
        <!--表格主体-->
        <el-col :span="20">
            <el-row style="margin: 5px 5px;">
                <!--查询区-->
                <el-col :span="24">
                    <el-form v-model="deviceSearch" style="margin: 15px 0px 0px 0px" inline>
                        <el-form-item label="设备编号">
                            <el-input v-model="deviceSearch.deviceId"/>
                        </el-form-item>
                        <el-form-item label="设备名称">
                            <el-input v-model="deviceSearch.deviceName"/>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="search" type="primary">
                                搜索
                            </el-button>
                            <el-button @click="cleanSearch">
                                重置
                            </el-button>
                            <el-button type="success" @click="exportDevice">
                                导出
                            </el-button>

                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <!--按钮功能区-->
            <el-row style="margin: 5px 5px;">
                <el-col :span="24">
                    <el-button-group>
                        <el-button @click="insert" type="primary" :disabled="deviceSearch.deviceTypeId == 'no-search'">
                            新增
                        </el-button>
                        <el-button @click="updateTool" :disabled="selectIdList.length != 1" type="success">
                            修改
                        </el-button>
                        <el-button @click="deleteDevList" :disabled="selectIdList.length == 0" type="danger">
                            删除
                        </el-button>
                    </el-button-group>
                </el-col>
            </el-row>
            <!--表格主体-->
            <el-row style="margin: 5px 5px;">
                <el-col :span="24">
                    <el-table
                            :data="deviceList"
                            broder
                            :stripe="true"
                            row-key="deviceId"
                            size="small"
                            @selection-change="changeChooses"
                    >
                        <el-table-column align="center" type="selection" width="55"/>
                        <el-table-column align="center" label="设备编号">
                            <template #default="scope">
                                <el-link type="primary" @click="showDeviceDesc(scope.row.deviceId)">{{scope.row.deviceId}}</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="deviceName" label="设备名称"/>
                        <el-table-column align="center" prop="deviceBrand" label="设备品牌"/>
                        <el-table-column align="center" prop="deviceType" label="设备型号"/>
                        <el-table-column align="center" prop="deviceWorkShopId" label="设备车间"/>
                        <el-table-column align="center" prop="deviceStatus" label="设备状态">
                            <template #default="scope">
                                <el-tag type="primary" v-if="scope.row.deviceStatus == 1">正常</el-tag>
                                <el-tag type="danger" v-else>停机</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="deviceWorkShopId" label="设备车间"/>
                        <el-table-column align="center" prop="deviceCreateTime" label="创建时间"/>
                        <el-table-column width="120" align="center" label="操作">
                            <template #default="scope">
                                <el-row>
                                    <el-col :span="12">
                                        <el-link @click="updateLineDevice(scope.row.deviceId)" type="primary">
                                            <el-icon>
                                                <EditPen/>
                                            </el-icon>
                                            修改
                                        </el-link>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-link @click="deleteDevice(scope.row.deviceId)" type="primary">
                                            <el-icon>
                                                <DeleteFilled/>
                                            </el-icon>
                                            删除
                                        </el-link>
                                    </el-col>
                                </el-row>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <!--分页-->
            <!--分页栏-->
            <el-row style="margin: 5px 5px;">
                <!-- 监听页码的变化事件 -->
                <el-pagination @change="changePage" :total="total" background layout="prev, pager, next"/>
            </el-row>
        </el-col>
    </el-row>

  <!--新增数据弹窗-->
    <el-dialog
            v-model="deviceDialogInsertShow"
            title="新增设备"
    >
        <el-form v-model="insertDevice" label-width="auto">
            <el-form-item label="设备名称">
                <el-input v-model="insertDevice.deviceName"/>
            </el-form-item>
            <el-form-item label="设备品牌">
                <el-input v-model="insertDevice.deviceBrand"/>
            </el-form-item>
            <el-form-item label="设备型号">
                <el-input v-model="insertDevice.deviceType"/>
            </el-form-item>
            <el-form-item label="车间编号">
                <el-select style="width: 200px;" v-model="insertDevice.deviceWorkShopId">
                    <el-option label="WS_001" value="WS_001"/>
                    <el-option label="WS_002" value="WS_002"/>
                    <el-option label="WS_003" value="WS_003"/>
                </el-select>
            </el-form-item>
            <el-form-item label="设备状态">
                <el-select style="width: 200px;" v-model="insertDevice.deviceStatus">
                    <el-option label="启用" :value="1"/>
                    <el-option label="禁用" :value="2"/>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button @click="putInsert" type="primary">提交</el-button>
                <el-button @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
  <!--修改数据弹窗-->
    <el-dialog
            v-model="deviceDialogUpdateShow"
            title="新增设备"
    >
        <el-form v-model="updateDevice" label-width="auto">
            <el-form-item label="设备名称">
                <el-input v-model="updateDevice.deviceName"/>
            </el-form-item>
            <el-form-item label="设备品牌">
                <el-input v-model="updateDevice.deviceBrand"/>
            </el-form-item>
            <el-form-item label="设备型号">
                <el-input v-model="updateDevice.deviceType"/>
            </el-form-item>
            <el-form-item label="设备类型">
                <el-select style="width: 200px;" v-model="updateDevice.deviceTypeId">
                    <template v-for="deviceType in deviceTypeList">
                        <el-option :label="deviceType.deviceTypeName" :value="deviceType.deviceTypeId"/>
                    </template>
                </el-select>
            </el-form-item>
            <el-form-item label="车间编号">
                <el-select style="width: 200px;" v-model="updateDevice.deviceWorkShopId">
                    <el-option label="WS_001" value="WS_001"/>
                    <el-option label="WS_002" value="WS_002"/>
                    <el-option label="WS_003" value="WS_003"/>
                </el-select>
            </el-form-item>
            <el-form-item label="设备状态">
                <el-select style="width: 200px;" v-model="updateDevice.deviceStatus">
                    <el-option label="启用" :value="1"/>
                    <el-option label="禁用" :value="2"/>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button @click="PutUpdate" type="primary">提交</el-button>
                <el-button @click="cancelUpdate">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
  <!--详情窗口-->
    <el-dialog
        v-model="deviceDialogDescShow"
        title="项目详情"
        @close="cleanDesc"
    >
        <el-descriptions v-model="deviceDesc">
            <el-descriptions-item label="设备编号">{{deviceDesc.deviceId}}</el-descriptions-item>
            <el-descriptions-item label="设备名称">{{deviceDesc.deviceName}}</el-descriptions-item>
            <el-descriptions-item label="设备品牌">{{deviceDesc.deviceBrand}}</el-descriptions-item>
            <el-descriptions-item label="设备型号">{{deviceDesc.deviceType}}</el-descriptions-item>
            <el-descriptions-item label="设备工间">{{deviceDesc.deviceWorkShopId}}</el-descriptions-item>
            <el-descriptions-item label="设备状态">
                <el-tag type="primary" v-if="deviceDesc.deviceStatus == 1">正常</el-tag>
                <el-tag type="danger" v-else>停机</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="创建时间">{{deviceDesc.deviceCreateTime}}</el-descriptions-item>
            <el-descriptions-item label="修改时间">{{deviceDesc.deviceModifyTime}}</el-descriptions-item>
        </el-descriptions>
    </el-dialog>
</template>

<script setup>
import {ArrowRight} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import deviceType from "@/api/device/deviceType.js";
import device from "@/api/device/device.js";
import {ElMessage, ElMessageBox} from "element-plus";

//封装新增弹窗
let deviceDialogInsertShow = ref(false)
//封装修改弹窗
let deviceDialogUpdateShow = ref(false)
//封装详情弹窗
let deviceDialogDescShow = ref(false)
//封装类别查询信息
let deviceTypeList = ref([])
//封装查询信息
let deviceSearch = ref({})
//封装数据总条数
let total = ref(0)
//封装页数信息
let pageNum = ref(1)
//封装查询到的设备信息
let deviceList = ref([])
//封装新增设备信息
let insertDevice = ref({})
//封装修改设备信息
let updateDevice = ref({})
//封装选中的id集合
let selectIdList = ref([])
//封装项目详情信息
let deviceDesc = ref({})




function exportDevice(){
    device.exportDevice(deviceSearch.value, pageNum.value, 10,res=>{
        if (res.code == 200){
            ElMessage({
                type:"success",
                message:"导出成功"
            })
        }else {
            ElMessage({
                type:"error",
                message:"导出失败"
            })
        }
    })
}

function cleanDesc(){
    deviceDesc.value = new ref({})
}
function showDeviceDesc(deviceId){
    deviceDialogDescShow.value = true
    device.loadUpdateInfo(deviceId,res=>{
        deviceDesc.value = res.data
    })
}
function deleteDevList() {
    ElMessageBox.confirm(
        '你确定要删除设备吗',
        '删除项目',
        {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'error'
        }
    ).then(() => {
        let success = true;
        selectIdList.value.forEach(deviceId => {
            device.deleteDevice(deviceId, res => {
                if (res.code != 1) {
                    success = false
                }
            })
        })
        if (success) {
            ElMessage({
                type: "success",
                message: "删除成功"
            })
            loadDevices()
        } else {
            ElMessage({
                type: "error",
                message: "网络开了小差，请稍后重试"
            })
        }
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消删除'
        })
    })
}

function updateTool() {
    updateLineDevice(selectIdList.value)
}

function changeChooses(value) {
    let tempIds = new Array();
    value.forEach(deviceV => {
        tempIds.push(deviceV.deviceId)
    })
    selectIdList.value = tempIds;
}

function deleteDevice(deviceId) {
    ElMessageBox.confirm(
        '你确定要删除设备吗',
        '删除项目',
        {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'error'
        }
    ).then(() => {
        device.deleteDevice(deviceId, res => {
            if (res.code == 1) {
                ElMessage({
                    type: "success",
                    message: "删除成功"
                })
                loadDevices()
            } else {
                ElMessage({
                    type: "error",
                    message: "网络开了小差，请稍后重试"
                })
            }
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消删除'
        })
    })
}

/**
 * 跟新设备信息
 * @constructor
 */
function PutUpdate() {
    device.UpdateDevice(updateDevice.value, res => {
        if (res.code == 1) {
            ElMessage({
                type: "success",
                message: "修改成功"
            })
            loadDevices()
            cancelUpdate()
        } else if (res.code == 300) {
            ElMessage({
                type: "warning",
                message: "类别名称重复请重新输入"
            })
        } else {
            ElMessage({
                type: "error",
                message: "跟新失败，请重试"
            })
        }
    })
}

function cancelUpdate() {
    updateDevice.value = new ref({})
    deviceDialogUpdateShow.value = false
}

/**
 * 打开修改窗口
 * @param deviceId
 */
function updateLineDevice(deviceId) {
    deviceDialogUpdateShow.value = true;
    device.loadUpdateInfo(deviceId, res => {
        console.log(res.data)
        updateDevice.value = res.data
    })
}

//上传新增
function putInsert() {
    if (!insertDevice.value.deviceName || !insertDevice.value.deviceStatus || !insertDevice.value.deviceBrand || !insertDevice.value.deviceWorkShopId || !insertDevice.value.deviceType) {
        ElMessage({
            type: "error",
            message: "缺少元素无法进行添加"
        })
        throw new Error("缺少元素，无法进行添加")
    }
    device.insertDevice(insertDevice.value, res => {
        if (res.code == 1) {
            ElMessage({
                type: "success",
                message: "添加成功"
            })
            loadDevices();
            cancel();
        } else if (res.code == 300) {
            ElMessage({
                type: "warning",
                message: "名字重复无法添加"
            })
        } else {
            ElMessage({
                type: "error",
                message: "添加失败，请稍后重试"
            })
        }
    })
}

//关闭新增窗口
function cancel() {
    insertDevice.value = new ref({})
    deviceDialogInsertShow.value = false
}

//新增数据
function insert() {
    insertDevice.value.deviceTypeId = deviceSearch.value.deviceTypeId
    deviceDialogInsertShow.value = true
}

//改变页面数据
function changePage(value) {
    pageNum.value = value;
    loadDevices()
}

function changeType(deviceTypeId) {
    deviceSearch.value.deviceTypeId = deviceTypeId
    loadDevices()
}

function cleanSearch() {
    deviceSearch.value.deviceName = undefined
    deviceSearch.value.deviceId = undefined
    loadDevices();
}

function search() {
    loadDevices();
}

function loadDevices() {
    device.loadAllDeviceList(deviceSearch.value, pageNum.value, 10, res => {
        pageNum.value = res.data.pageNum
        total.value = res.data.total
        deviceList.value = res.data.list
    })
}

/**
 * 加载所有的设备类型列表
 */
function loadDeviceTypes() {
    deviceType.loadAllOptions(res => {
        deviceTypeList.value = res.data
        deviceTypeList.value.forEach(deviceTypeT => {
            deviceTypeT.label = deviceTypeT.deviceTypeName
        })
    })
}

onMounted(() => {
    loadDeviceTypes()
    loadDevices()
    deviceSearch.value.deviceTypeId = "no-search"
})
</script>

<style scoped>

</style>